<template>
	<div style="display: flex;align-items: center;margin-bottom: 20px;">
		<span style="margin-right: 10px;cursor: pointer;display: flex;align-items: center;" @click="back">
			<el-icon><ArrowLeft /></el-icon>
			<span>返回</span>
			<span style="margin-left: 10px;">|</span>
		</span>
		<h3>{{menuItem ? "修改菜单" : "添加菜单"}}</h3>
	</div>
	<el-form 
		ref="myForm"
		:model="formData" 
		:rules="rules"
		label-width="auto"
		>
		<el-form-item label="上级菜单" label-width="110" prop="menuSuperior" style="width: 350px;">
			
			<el-tree-select
				v-model="formData.menuSuperior"
				:data="menuoptions"
				check-strictly
				show-checkbox
				:render-after-expand="false"
				:default-checked-keys="checkedArr"
				:props="propData"
				node-key="menuId"
				placeholder="请选择上级菜单"
			  />
		</el-form-item>
		
		<el-form-item label="菜单名称" label-width="110" prop="menuName" style="width: 350px;">
			<el-input placeholder="请输入菜单名称" v-model="formData.menuName"></el-input>
		</el-form-item>
		<el-form-item label="菜单类型" label-width="110" prop="menuType" style="width: 350px;">
			<el-radio-group v-model="formData.menuType">
			  <el-radio :value="1" size="large">菜单</el-radio>
			  <el-radio :value="2" size="large">按钮</el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item label="菜单路径" label-width="110" prop="menuPath" style="width: 350px;">
			<el-input placeholder="请输入菜单路径" v-model="formData.menuPath"></el-input>
		</el-form-item>
		<el-form-item label="菜单图片" label-width="110" style="width: 350px;">
			 <el-upload
			    class="avatar-uploader"
			    :action="uploadUrl"
			    :show-file-list="false"
			    :on-success="handleAvatarSuccess"
			    :before-upload="beforeAvatarUpload"
			  >
			    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
			    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
			  </el-upload>
		</el-form-item>
		<el-form-item label="是否启用" prop="menuStatus" label-width="110" style="width: 350px;">
			<el-radio-group v-model="formData.menuStatus">
			  <el-radio :value="0" size="large">是</el-radio>
			  <el-radio :value="1" size="large">否</el-radio>
			</el-radio-group>
		</el-form-item>
		<el-form-item style="margin-left: 300px;">
			<el-button type="primary" @click="save(myForm)">保存</el-button>
		</el-form-item>
	</el-form>
</template>

<script setup>
	import {ref,reactive, onMounted,defineEmits} from "vue"
	import { ElMessage,ElForm,ElFormItem,ElSelect,ElOption,ElInput,ElRadio,ElRadioGroup,ElButton,ElTreeSelect,ElUpload,ElIcon } from "element-plus";
	import {insertMenu,getAllMenuList,getMenuList,updateMenu} from "@/api"
	import { useRoute,useRouter } from "vue-router";
	import { Plus,ArrowLeft } from '@element-plus/icons-vue'
	import { uploadUrl,baseUrl } from "@/utils/request";
	
	let route=useRoute();
	let router=useRouter()
	let menuItem=sessionStorage.getItem("itemMenu")
	let formData=reactive({
		menuName:"",
		menuSuperior:"",
		menuType:"1",
		menuPath:"",
		menuStatus:"0",
		menuImage:"",//菜单图片
	})
	let checkedArr=ref([])//默认选中的
	let propData=reactive({
		label:"menuName",
		children:"childs"
	})
	if(menuItem){
		// console.log('menuItem',JSON.parse(menuItem))
		Object.assign(formData,JSON.parse(menuItem))
		if(formData.menuType=="菜单"){
			formData.menuType=1
		}else if(formData.menuType=="按钮"){
			formData.menuType=2
		}
	}
	let menuoptions=ref([]);
	let rules = reactive({
		menuName: [{
			required: true,
			message: '请输入菜单名称',
			trigger: 'blur'
		}, ],
		menuSuperior: [{
			required: true,
			message: '请选择上级菜单',
			trigger: 'blur'
		}, ],
		menuType: [{
			required: true,
			message: '请选择菜单类型',
			trigger: 'blur'
		}, ],
		menuPath: [{
			required: true,
			message: '请输入菜单路径',
			trigger: 'blur'
		}, ],
		menuImage: [{
			required: false,
			message: '请选择菜单图标',
			trigger: 'blur'
		}, ],
		menuStatus: [{
			required: true,
			message: '请选择菜单是否启用',
			trigger: 'blur'
		}, ],
	})
	let myForm=ref(null)
	const save= async ()=>{
		// console.log(formData)
		//let res=await insertMenu(formData)
		//console.log("添加菜单",res)
		if(menuItem){
			//修改
			formData.menuId=JSON.parse(menuItem).menuId
			let res=await updateMenu(formData)
			// router.go(-1)
			ElMessage({
			    message:"修改成功",
			    type: 'success',
			})
			emit('update-message')
		}else{
			//添加
			//console.log(formData)
			let res=await insertMenu(formData)
			ElMessage({
			    message:"添加成功",
			    type: 'success',
			})
			emit('update-message')
		}
	}
	//图片上传
	const imageUrl = ref('')
	
	const handleAvatarSuccess= (response,uploadFile) => {
		// console.log('上传成功',response)
		imageUrl.value = URL.createObjectURL(uploadFile.raw)
	  //imageUrl.value=baseUrl+"manager/"+response.data
	  formData.menuImage=response.data
	}
	
	const beforeAvatarUpload= (rawFile) => {
		// console.log(rawFile)
		let reg=/(jpg|png|jpeg)$/
	  if (!reg.test(rawFile.type)) {
	    ElMessage.error('图片只能是jpg/jpeg/png格式的')
	    return false
	  } else if (rawFile.size / 1024 / 1024 > 4) {
	    ElMessage.error('图片的大小不能超过4MB')
	    return false
	  }
	  return true
	}
	
	onMounted(async (formEl)=>{
		//获取所有菜单，展示在下拉菜单中;
		let res=await getAllMenuList({
			roleId:Number(sessionStorage.getItem("roleId"))
		})
		// console.log('所有菜单',res)
		menuoptions.value=res
		if(menuItem){
			//如果是修改功能，回显
			checkedArr.value=[JSON.parse(menuItem).menuSuperior]
			
		}
	})

	// 点击返回
	const emit = defineEmits(['update-message']);
	const back=()=>{
		emit('update-message');
	}
</script>

<style scoped>
	.avatar-uploader .avatar {
	  width: 178px;
	  height: 178px;
	  display: block;
	}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>